﻿<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>时钟</title>
		<style type="text/css">
			.arm {
				position: absolute;
				top: 50%;
				left: 50%;
				height: 120px;
				width: 10px;
				background: black;
				transform: translate(-50%, -100%);
				border-radius: 0 0 20px 20px;
				transform-origin: 50% 100%;
				z-index: 4;
			}
		</style>
	</head>

	<body>
		<!-- 整个框架 -->
		<div class="watch">
			<!-- 面板 -->
			<div class="face">
				<!-- 数字 -->
				<div class="numbers">
					<div class="number number-1"> <span>1</span></div>
					<div class="number number-2"> <span>2</span></div>
					<div class="number number-3"> <span>3</span></div>
					<div class="number number-4"><span>4</span></div>
					<div class="number number-5"><span>5</span></div>
					<div class="number number-6"><span>6</span></div>
					<div class="number number-7"><span>7</span></div>
					<div class="number number-8"><span>8</span></div>
					<div class="number  number-9"><span>9</span></div>
					<div class="number number-10"><span>10</span></div>
					<div class="number  number-11"><span>11</span></div>
					<div class="number  number-12"><span>12</span></div>
				</div>
				<!--指针-->
				<div class="arms">
					<div class="arm arm-hour"></div>
					<div class="arm arm-minute"></div>
					<div class="arm arm-second">
						<div class="body"></div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>

<style type="text/css">
	body {
		width: 98%;
		height: 98vh;
		display: flex;
	}
	
	.face {
		position: relative;
		/*display: -webkit-box;*/
		display: flex;
		justify-content: center;
		/*-webkit-box-align: start;*/
		/*-ms-flex-align: start;*/
		align-items: flex-start;
		width: 400px;
		height: 400px;
		background: green;
		border-radius: 50%;
	}
	
	.numbers {
		position: relative;
	}
	
	.number {
		position: absolute;
		height: 200px;
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
		font-size: 28px;
		/*background: red;*/
		/*border: 1px solid;*/
		width: 20px;
	}
	
	.number:nth-child(1) {
		-webkit-transform: rotate(25deg);
		transform: rotate(25deg);
	}
	
	.number:nth-child(1) span {
		display: block;
		-webkit-transform: rotate(-25deg);
		transform: rotate(-25deg);
	}
	
	.number:nth-child(2) {
		-webkit-transform: rotate(55deg);
		transform: rotate(55deg);
	}
	
	.number:nth-child(2) span {
		display: block;
		-webkit-transform: rotate(-55deg);
		transform: rotate(-55deg);
	}
	
	.number:nth-child(3) {
		-webkit-transform: rotate(85deg);
		transform: rotate(85deg);
	}
	
	.number:nth-child(3) span {
		display: block;
		-webkit-transform: rotate(-85deg);
		transform: rotate(-85deg);
	}
	
	.number:nth-child(4) {
		-webkit-transform: rotate(85deg);
		transform: rotate(85deg);
	}
	
	.number:nth-child(4) span {
		display: block;
		-webkit-transform: rotate(-85deg);
		transform: rotate(-85deg);
	}
	
	.number:nth-child(4) {
		-webkit-transform: rotate(115deg);
		transform: rotate(115deg);
	}
	
	.number:nth-child(4) span {
		display: block;
		-webkit-transform: rotate(-115deg);
		transform: rotate(-115deg);
	}
	
	.number:nth-child(5) {
		-webkit-transform: rotate(145deg);
		transform: rotate(145deg);
	}
	
	.number:nth-child(5) span {
		display: block;
		-webkit-transform: rotate(-145deg);
		transform: rotate(-145deg);
	}
	
	.number:nth-child(6) {
		-webkit-transform: rotate(175deg);
		transform: rotate(175deg);
	}
	
	.number:nth-child(6) span {
		display: block;
		-webkit-transform: rotate(-175deg);
		transform: rotate(-175deg);
	}
	
	.number:nth-child(7) {
		-webkit-transform: rotate(205deg);
		transform: rotate(205deg);
	}
	
	.number:nth-child(7) span {
		display: block;
		-webkit-transform: rotate(-205deg);
		transform: rotate(-205deg);
	}
	
	.number:nth-child(8) {
		-webkit-transform: rotate(235deg);
		transform: rotate(235deg);
	}
	
	.number:nth-child(8) span {
		display: block;
		-webkit-transform: rotate(-235deg);
		transform: rotate(-235deg);
	}
	
	.number:nth-child(9) {
		-webkit-transform: rotate(265deg);
		transform: rotate(265deg);
	}
	
	.number:nth-child(9) span {
		display: block;
		-webkit-transform: rotate(-265deg);
		transform: rotate(-265deg);
	}
	
	.number:nth-child(10) {
		-webkit-transform: rotate(295deg);
		transform: rotate(295deg);
	}
	
	.number:nth-child(10) span {
		display: block;
		-webkit-transform: rotate(-295deg);
		transform: rotate(-295deg);
	}
	
	.number:nth-child(11) {
		-webkit-transform: rotate(325deg);
		transform: rotate(325deg);
	}
	
	.number:nth-child(11) span {
		display: block;
		-webkit-transform: rotate(-325deg);
		transform: rotate(-325deg);
	}
	
	.number:nth-child(12) {
		-webkit-transform: rotate(deg);
		transform: rotate(deg);
	}
	
	.number:nth-child(12) span {
		display: block;
		-webkit-transform: rotate(0deg);
		transform: rotate(-355deg);
	}
</style>